<template>
  <div class="imagelist-container">
    <el-card class="box-card">
      <el-radio-group v-model="collect" class="action-head" @change="onCollectChange">
        <div class="tab-radio">
          <el-radio-button :label="false">全部</el-radio-button>
          <el-radio-button :label="true">收藏</el-radio-button>
        </div>
      </el-radio-group>
      <!-- 素材列表 -->
      <el-row :gutter="10">
        <el-col
          :xs="24"
          :sm="12"
          :md="8"
          :lg="6"
          v-for="(img, index) in images"
          :key="index"
        >
          <div class="imageCover" @click="onSelected(selected = index)" ref="imageCover">
            <img :src="img.url" :imageIndex="index" ref="image">
            <div class="cover-mask" v-if="selected === index"></div>
          </div>
        </el-col>
      </el-row>
      <el-pagination
        background
        layout="prev, pager, next"
        :total="totalCount"
        :page-size="per_page"
        :current-page.sync="page"
        @current-change="onCurrentPage"
      >
      </el-pagination>
    </el-card>
  </div>
</template>
<script>
// 导入素材相关api接口
import { getImages } from '@/api/image'
export default {
  name: 'imageList',
  data () {
    return {
      // 素材图片列表
      images: [],
      // 全部素材
      collect: false,
      // 总页码
      totalCount: null,
      // 一页显示多少
      per_page: 8,
      // 当前页
      page: 1,
      // 当前点击图片的索引
      // 选中的对象,用于存储当前点击的索引,和页码
      selectObj: {
        selectPage: 1,
        index: null
      },
      selected: null
    }
  },
  methods: {
    // 获取素材图片列表
    async imagesLists (page = 1) {
      const res = await getImages({
        // 当前页
        page: this.page,
        // per_page每页显示10条数据
        per_page: this.per_page,
        // collect:false,获取全部素材图片,collect:true获取收藏素材图片
        collect: this.collect
      })

      try {
        const { results, total_count: totalCount } = res.data.data
        this.images = results
        this.totalCount = totalCount
      } catch (err) {
        return Promise.reject(err)
      }
    },
    // 全部&收藏切换
    onCollectChange () {
      this.imagesLists(this.page = 1)
    },
    // 分页点击事件
    onCurrentPage (page) {
      // 将当前点击的分页页码,传给getImages接口
      this.imagesLists()
    },
    // 图片的选中状态
    onSelected () {
      this.selectObj.selectPage = this.page
      this.selectObj.index = this.selected
    }
  },
  created () {
    // 执行获取素材图片列表方法,默认渲染全部并且渲染第一页数据
    this.imagesLists(this.page)
  },
  updated () {
    if (this.selectObj.selectPage !== this.page) {
      this.selected = null
    } else {
      this.selected = this.selectObj.index
    }
  }
}
</script>
<style lang="less">
.imagelist-container{
  width: 100%;
  height: 100%;
  .box-card{
    .action-head{
      padding-bottom: 20px;
      display: flex;
      justify-content: space-between;
    }
    .el-row{
      margin-bottom: 20px;
      .el-col{
        text-align: center;
        .imageCover{
          width: 150px;
          height: 120px;
          border: 1px dashed #ddd;
          position: relative;
          display: inline-block;
          margin-bottom: 10px;
          img{
            width: 100%;
            height: 100%;
          }
        }
        .cover-mask{
          width: 100%;
          height: 100%;
          position: absolute;
          left: 0;
          top: 0;
          right: 0;
          bottom: 0;
          background: rgba(0, 0, 0, .3) url('./selected.png')no-repeat center;
          background-size: 50px;
        }
      }
    }
  }
}
</style>
